<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-row type="flex" justify="space-between" align="middle">
          <span>权限管理</span>
          <!-- 1.添加页面访问权限 -->
          <el-button @click="openAdd(1, 0)" type="primary">添加权限</el-button>
        </el-row>
      </div>
      <!-- card body -->
      <el-table :data="list" row-key="id" border>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="name" label="操作">
          <template #default="{ row }">
            <!-- 2.添加页面下按钮使用权限 
            v-if="row.type === 1   页面权限才显示添加按钮
            -->
            <el-button
              v-if="row.type === 1"
              @click="openAdd(2, row.id)"
              type="text"
              >添加</el-button
            >
            <el-button type="text" @click="openEdit(row.id)">编辑</el-button>
            <el-button @click="delPerm(row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增权限 
    复用新增权限，实现编辑权限
    -->
    <el-dialog
      :visible.sync="showDialog"
      :title="formData.id ? '修改权限' : '新增权限'"
      @close="close"
    >
      <!-- 表单内容 -->
      <el-form ref="fm" label-width="100px" :model="formData" :rules="rules">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="formData.description" />
        </el-form-item>
        <el-form-item label="权限启用">
          <el-switch
            v-model="formData.enVisible"
            active-text="启用"
            active-value="1"
            inactive-text="不启用"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: right">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button @click="submit" type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermissionListApi,
  addPermissionApi,
  delPermissionApi,
  getPermissionDetailApi,
  updatePermissionApi,
} from "@/api/permisson";
// 导入树形转化的方法
import { listToTreeData } from "@/utils";
export default {
  data() {
    return {
      // 控制弹层显隐
      showDialog: false,
      // 权限点列表
      list: [],
      // 表单数据
      formData: {
        enVisible: "0", // 开启
        name: "", // 名称
        code: "", // 权限标识
        description: "", // 描述
        type: "", // 类型
        pid: "", // 添加到哪个节点下
      },
      // 校验规则
      rules: {
        name: [
          { required: true, message: "权限点名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "权限点标识不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getPermission();
  },
  methods: {
    /**
     * 新增权限，两种情况：
     * 1.某个页面访问权限（动态路由）->右上角添加权限->type=1,pid="0"
     * 2.页面下按钮权限->点击table列表页面权限右侧添加->type=2,pid为当前需要添加的项id
     */
    /**
     * type 添加权限类型 1-页面  2-页面下按钮
     * pid  添加到哪里  0-顶级权限（页面） | 页面id-页面下按钮权限
     */
    // 新增权限
    openAdd(type, pid) {
      // 打开弹层
      this.showDialog = true;
      // 存储新增权限type类型和pid到的值
      this.formData.type = type;
      this.formData.pid = pid;
      // async () {
      //   await addPermissionApi(this.formData)
      //     this.$message.success('操作成功')
      //     this.getPermission()
      //     this.showDialog = false
      // }
    },
    // 新增权限确定按钮
    submit() {
      // 表单校验
      // 通过后调用后台接口
      // 提示消息，关闭弹层并刷新列表
      this.$refs.fm.validate(async (isOk) => {
        if (isOk) {
          // 校验通过
          if (this.formData.id) {
            // 修改
            await updatePermissionApi(this.formData);
            this.$message.success("更新成功");
          } else {
            // 新增
            await addPermissionApi(this.formData);
            this.$message.success(
              this.formData.type === 1 ? "页面权限新增成功！" : "按钮新增成功！"
            );
          }
          this.getPermission();
          this.showDialog = false;
        }
      });
    },
    // 删除权限点按钮
    delPerm(row) {
      /**
       * 删除流程：
       * 1.用户确认弹框
       * 2.点了确定->调用后台删除接口方法
       *   如果删除的是父节点，下面有子节点，无法删除
       * 3.提示消息，并刷新列表
       */
      this.$confirm(`确认删除：${row.name}这个权限吗？`, "提示")
        .then(async () => {
          // 点确定
          // 判断是否有子
          if (row.children && row.children.length > 0) {
            return this.$message.error("当前权限下有按钮权限，无法删除！");
          }
          await delPermissionApi(row.id);
          this.$message.success("删除成功！");
          this.getPermission();
        })
        .catch(() => {
          // 点取消
        });
    },
    // 编辑按钮
    async openEdit(id) {
      const data = await getPermissionDetailApi(id);
      this.formData = data;
      this.showDialog = true;
    },
    // 关闭弹层执行
    close() {
      // 重置表单
      this.$refs.fm.resetFields();
      this.showDialog = false;
      // 手动重置表单
      this.formData = {
        enVisible: "0", // 开启
        name: "", // 名称
        code: "", // 权限标识
        description: "", // 描述
        type: "", // 类型
        pid: "", // 添加到哪个节点下
      };
    },
    // 获取权限点列表数据
    async getPermission() {
      const list = await getPermissionListApi();
      // console.log(list);
      this.list = listToTreeData(list);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>